import { Button, Form, Input, Select, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { FormValues } from "..";


function SkuAdminForm({ formSubmit }: { formSubmit: (values: FormValues) => void }) {
  const onFinish = (values: FormValues) => {
    formSubmit(values);
  };
  const initData = [
    { name: "color", tags: ["红色", "蓝色", "绿色"] },
    { name: "size", tags: ["S", "M", "L"] },
    { name: "texture", tags: ["棉质", "涤纶"] },
  ];
  return (
    <>
      <Form
        name="dynamic_form_nest_item"
        onFinish={onFinish}
        style={{ maxWidth: 600 }}
        autoComplete="off"
      >
        <Form.List name="options" initialValue={initData}>
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <Space
                  key={key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="baseline"
                >
                  <Form.Item
                    {...restField}
                    name={[name, "name"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="name" />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, "tags"]}
                    rules={[{ required: true, message: "Missing last name" }]}
                  >
                    <Select
                      mode="tags"
                      style={{ width: "200px" }}
                      placeholder="Tags Mode"
                    />
                  </Form.Item>
                  <MinusCircleOutlined onClick={() => remove(name)} />
                </Space>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                >
                  Add field
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Create Sku Table
          </Button>
        </Form.Item>
      </Form>
    </>
  );
}

export default SkuAdminForm;
